<template>
  <div class="login_container">

        <el-form class="login_form" ref="loginForm" >
          <div class="sanyi">三一门-何为诚</div>

          <el-form-item required>
            <el-input  v-model="sobUser.userName"  placeholder="用户名、邮箱地址"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="originalPassword" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item  required >
            <el-input  v-model="verifyCode" placeholder="请输入验证码"
                       @keyup.enter.native="doLogin"></el-input>
            <img :src="captchaPath.value" class="captcha_code" @click="updateVerifyCode" style="margin-top: 10px">

          </el-form-item>
          <el-form-item>
            <el-button class="login_btn" type="primary" @click="doLogin()">登录</el-button>
          </el-form-item>

          <div class="weibu">没有账号, 立即注册 找回密码</div>
          <div class="weibu">返回到首页</div>
        </el-form>

  </div>
</template>


<script setup lang="ts">


import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
import {hex_md5} from "../../utils/md5"
import {doLogin1, success_code} from "../../utils/api";
import {useRouter} from 'vue-router'

import {ElMessage} from "element-plus";
import {toastE} from "../../utils/toast";

// 定义响应式数据
const router=useRouter()
let originalPassword = ref('');
let sobUser=ref({userName:'',password:''})
let verifyCode = ref('');
let captchaPath = ref('');





const isMobile = ref(false);
window.addEventListener('resize', checkDevice);
// 检查设备类型并更新isMobile响应式状态
function checkDevice() {
  console.log( window.innerWidth)
  isMobile.value = window.innerWidth <= 768; // 根据实际需要调整断点值
}
const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}


function doLogin(){

  if (sobUser.value.userName === '') {


    toastE('账户名不可以为空','warning');
    return;
  }

  if (originalPassword.value === '') {
    toastE('密码不可以为空','warning');
    return;
  }

  if (verifyCode.value === '') {
    toastE('验证码不可以为空','warning')
  }
  sobUser.value.password = hex_md5(originalPassword.value)
  console.log(sobUser.value.userName)
  console.log(sobUser.value.password)
  console.log(verifyCode.value)

  doLogin1(verifyCode.value, sobUser.value).then(result => {
    //处理结果
    //判断状态
    if (result.code === success_code) {
      console.log(result)
      toastE( result.message,'success')
      //如果成功
      //成功则跳转--》判断角色，如果是普通用户，跳转到首页，如果是管理员，则跳转到管理中心
      router.push('/')
    } else {
      //更新一下验证码
      updateVerifyCode();
      ElMessage.error(result.message)

    }

  })
}
function updateVerifyCode() {
  captchaPath.value = ref('/user/captcha?&random=' + Date.parse(new Date()))
}
// 组件挂载时检查设备
onMounted(() => {
  // checkDevice();
  updateVerifyCode()
});

// 组件销毁前移除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', checkDevice);

});

// 监听窗口大小变化
watchEffect(() => {
  console.log('wozaijianting')
  // checkDevice();
});




</script>
<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  padding: 20px;
  background-size: cover;

  .login_form {
    width: 350px;
    position: relative;
    margin: auto;
    top: 20vh;
    background-size: cover;
    padding: 40px;

    .sanyi {
      margin-bottom: 20px;
      text-align: center;
      font-size: 35px; /* 根据需要调整文字大小 */
      background: linear-gradient(to right, #e74c3c, #3498db);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent; /* 使文字颜色透明，以便显示背景 */

    }

    .weibu{
      margin-bottom: 20px;
      text-align: center;
      font-size: 15px; /* 根据需要调整文字大小 */
      background: linear-gradient(to right, #e74c3c, #3498db);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent; /* 使文字颜色透明，以便显示背景 */
    }


    .login_btn {
      background-color: #001529;
      width: 100%;
    }
  }

  .captcha_code {
    cursor: pointer;
    vertical-align: middle;
    border: solid 1px #E6E6E6;
    padding-left: 10px;
    padding-right: 10px;
    width: 120px;
    height: 40px;
  }
}

@media (max-width: 768px) {
  .login_container {
    /* 针对移动设备的样式 */
  }}
</style>